<template>
	<view>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="list" :show="fail"></u-empty>
		</view>
		<block v-else>
			<u-gap></u-gap>
			<view class="item" v-for="(item,index) in list" :key="item.id" @click="toDetail(item.id)">
				<view class="upper">
					<view class="launch-time">
						<block v-if="item.status != 30">发起日期：{{item.buyingStartTime}}</block>
						<view :class="[item.status == '40' ? 'error' : '']">{{stateText(item.status)}}</view>
					</view>
					<view class="ongoing" v-if="item.status == 10">
						还差<text class="active">{{item.neededUserCount}}</text>人抢购成功 <u-icon style="margin: 0 10rpx;margin-left: 30rpx;"
						 name="clock"></u-icon>
						<u-count-down color="#FF4D46" separator-color="#FF4D46" :timestamp="item.timestamp"></u-count-down>

						<view style="text-align: right;flex: 1;">{{item.groupBuyType == 1 ? '公众抢购' : '包团抢购'}}</view>
					</view>
					<view class="state-time" style="display:flex;" v-if="item.status == '20'">拼成时间：{{item.buyingCloseTime}}
						<view style="text-align:right;flex:1">{{item.groupBuyType == 1 ? '公众抢购' : '包团抢购'}}</view>
					</view>
					<view class="state-time" style="display:flex;" v-if="item.status == '40'">失败时间：{{item.buyingCloseTime}}
						<view style="text-align:right;flex:1">{{item.groupBuyType == 1 ? '公众抢购' : '包团抢购'}}</view>
					</view>
				</view>
				<view class="product">
					<view style="width: 144rpx;">
						<u-lazy-load height="144" img-mode="aspectFill" border-radius="10" :image="item.goodsMainPhoto"></u-lazy-load>
					</view>
					<!-- <u-image width="144rpx" height="144rpx" border-radius="10rpx" :src="item.goodsMainPhoto"></u-image> -->
					<view class="info">
						<view class="name">{{item.goodsInfo.goodsName}}</view>
						
						<view class="money">
							<view class="tag">
								{{item.configPersonCount}}人团
							</view>
							<view class="">
								<text>￥</text>{{item.goodsInfo.groupBuyPrice}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status"></u-loadmore>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				fail: false,
				list: [],
				status: 'loading',
				imgURL: this.imageURL
			};
		},
		onLoad() {
			this.pageNo = 1
			this.getList(res => {
				this.loading = false
				this.status = res.length < 10 ? 'nomore' : 'loadmore'
				if (res == '') {
					this.fail = true
					return
				}
				this.list = res
			})
		},
		onPullDownRefresh() {
			this.pageNo = 1
			this.status = 'loading'
			this.getList(res => {
				this.status = res.length < 10 ? 'nomore' : 'loadmore'
				this.list = res
				uni.stopPullDownRefresh()
			})
		},
		onShow() {
			
		},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') return
			this.status = 'loading'
			this.pageNo++
			this.getList(res => {
				if (res == '') {
					this.status = 'nomore'
					return
				}
				this.list = this.list.concat(res)
				this.status = 'loadmore'
			})
		},
		methods: {
			toDetail(id) {
				this.$u.route('/pages/user/inviteFriends/inviteFriends', {
					'groupBuyingListId': id
				})
			},
			stateText(status) {
				switch (status) {
					case 0:
						return '未发起抢购'
						break
					case 10:
						return '抢购中'
						break
					case 15:
						return '抢购完成（系统未处理）'
						break
					case 20:
						return '抢购完成'
						break
					case 30:
						return '抢购取消'
						break
					case 40:
						return '抢购失败'
						break
					case 100:
						return '已完成'
						break
				}
			},
			getList(callback) {
				this.$u.post('groupbuyinglist/getLaunchGroupBuyingListByUser', {
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					let currentTime = new Date()
					let cDate =
						`${currentTime.getFullYear()}-${currentTime.getMonth()+1}-${currentTime.getDate()} ${currentTime.getHours()}:${currentTime.getMinutes()}:${currentTime.getSeconds()}`
					cDate = cDate.replace(/-/g, ':').replace(' ', ':');
					cDate = cDate.split(':');
					let date1 = new Date(cDate[0], (cDate[1] - 1), cDate[2], cDate[3], cDate[4], cDate[5]);
					res.list.forEach(item => {
						let buyingEstimateTime = item.buyingEstimateTime
						let transformationArray = item.goodsInfo.goodsMainPhoto.split(',')
						if (buyingEstimateTime) {
							buyingEstimateTime = buyingEstimateTime.replace(/-/g, ':').replace(' ', ':');
							buyingEstimateTime = buyingEstimateTime.split(':');
							let date2 = new Date(buyingEstimateTime[0], (buyingEstimateTime[1] - 1), buyingEstimateTime[2],
								buyingEstimateTime[3], buyingEstimateTime[4], buyingEstimateTime[5]);
							let date3 = (date2.getTime() - date1.getTime()) / 1000; //相差秒数
							item.timestamp = date3
						}
						item.goodsMainPhoto = this.imageURL + transformationArray[0]
					})
					callback(res.list)
				})
			}
		}
	}
</script>

<style lang="scss">
	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		background-color: #F7F7F7;
		padding: 0 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}

	.item {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.product {
			padding-top: 30rpx;
			display: flex;

			.info {
				flex: 1;
				position: relative;
				margin-left: 30rpx;
				.tag {
					color: #FFA03A;
					display: inline-block;
					// font-size: 22rpx;
					// overflow: hidden;
					// width: 358rpx;
					// text-overflow: ellipsis;
					// white-space: nowrap;
					border-radius: 17px;
					background-color: rgba($color: #F39D21, $alpha: .1);
					padding: 5rpx 15rpx;
					font-size: 24rpx;
				}
				.money {
					position: absolute;
					bottom: 0;
					left: 0;
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					text {
						font-size: 20rpx;
					}
				}

				.name {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}

		.upper {
			border-bottom: 1rpx solid #F7F7F7;
			padding-bottom: 30rpx;

			.state-time {
				margin-top: 10rpx;
			}

			.ongoing {
				margin-top: 10rpx;
				display: flex;

				.active {
					color: #FF4D46;
				}
			}

			.launch-time {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					color: #F39D21;

					&.error {
						color: #FF4D46;
					}
				}
			}
		}
	}
</style>
